<!--
 * @Author: LSC
-->
<template>
  <div class="user-activity">
    <div class="post">
      <div class="user-block">
        <i class="el-icon-s-shop shopIcon" />
        <span class="username">Deutsche Bank</span>
      </div>
      <p>{{ $t("merchantIndex.time") }}{{ timeWord() }}</p>
      <!-- <p>
        {{ $t("merchantIndex.quantity") }}：{{ $t("merchantIndex.All") }}:
        {{ nums }}；{{ $t("merchantIndex.On") }}: {{ onsaleList }};
        {{ $t("merchantIndex.Off") }}: {{ onoffList }}
      </p> -->
      <div class="enterShop">
        <el-button type="text" @click="enterShop">{{
          $t("merchantIndex.Enter")
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCommodityList } from "@/api/commodity";
export default {
  data() {
    return {
      nums: 11,
      onsaleList: 11,
      onoffList: 0,
    };
  },
  mounted() {
    this.getCommodityLength();
  },
  methods: {
    // 总共产品数量
    async getCommodityLength() {
      const res = await getCommodityList({
        page: 1,
        limit: 9999,
        name: "",
        type: "",
        groupId: "",
        status: "",
      });
      this.nums = res.data.length;
      this.onsaleList = res.data.filter(
        (item) => item.status.value === "status0"
      ).length;
      this.onoffList = res.data.filter(
        (item) => item.status.value === "status1"
      ).length;
      this.storage.set("commodityLength", res.data.length);
    },
    async enterShop() {
      // this.$store.dispatch('user/changeRoles', 'editor').then(() => {
      //   this.$router.push({ path: '/commodityManagement/list' })
      // })
      this.$router.push({ path: "/commodityManagement/list" });
    },
  },
};
</script>

<style lang="scss" scoped>
.user-activity {
  .user-block {
    display: flex;
    align-items: center;
    .shopIcon {
      font-size: 24px;
      margin-right: 12px;
    }
    .username {
      font-size: 16px;
      color: #000;
    }
  }

  .post {
    font-size: 14px;
    border: 1px solid #d2d6de;
    margin: 15px 0;
    padding: 15px 24px;
    color: #666;

    .image {
      width: 100%;
      height: 100%;
    }

    .user-images {
      padding-top: 20px;
    }
  }

  .list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;

    li {
      display: inline-block;
      padding-right: 5px;
      padding-left: 5px;
      font-size: 13px;
    }

    .link-black {
      &:hover,
      &:focus {
        color: #999;
      }
    }
  }
}

.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}
.enterShop {
  text-align: end;
}
</style>
